<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 18px">
      <el-breadcrumb-item :to="{ path: '/' }">用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider ></el-divider>
      <!--用户列表-->
    <el-row gutter="50">
      <el-col span="8">
        <div style="position: relative;margin-bottom: 20px">
          <el-input placeholder="请输入用户名" v-model="usernameSearch">
            <el-button slot="append" icon="el-icon-search" @click="userSearch()" style="color: #0095d7">
              搜索
            </el-button>
          </el-input>
        </div>
      </el-col>
      <el-col span="8">
        <div style="position: relative;margin-bottom: 20px">
          <el-input placeholder="请输入手机号" v-model="phoneNum">
            <el-button slot="append" icon="el-icon-search" @click="phoneSearch()" style="color: #0095d7">
              搜索
            </el-button>
          </el-input>
        </div>
      </el-col>
      <el-col span="8">
        <div style="position: relative;margin-bottom: 20px">
          <div class="block">
            <el-date-picker
                v-model="date.dateTime"
                type="date"
                placeholder="请选择日期"
                value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <el-button slot="append" icon="el-icon-search" @click="dateSearch()" style="color: #0095d7">
              搜索
            </el-button>
          </div>

        </div>
      </el-col>
    </el-row>


      <!--添加用户信息-->
      <div style="margin-left: 20px">
        <el-button type="primary" icon="el-icon-plus" @click="userInsert()">
          添加用户
        </el-button>
        <el-button type="primary" icon="el-icon-user-solid" @click="allUser()">
          刷新列表
        </el-button>
      </div>

      <el-table
                :data="userArr"
                style="width: 100%;margin:0 20px 20px 20px" border>
        <el-table-column type="index" label="" width="50" align="center"></el-table-column>
        <el-table-column prop="id" label="编号" width="100" align="center"></el-table-column>
        <el-table-column prop="username" label="用户名" align="center"></el-table-column>
        <el-table-column prop="roleName" label="角色" align="center"></el-table-column>
        <el-table-column prop="tel" label="联系方式" align="center"></el-table-column>
        <el-table-column prop="realName" label="真实姓名" align="center"></el-table-column>
        <el-table-column prop="remarks" label="备注" align="center"></el-table-column>
        <el-table-column label="是否启用" width="80" align="center">
          <template slot-scope="scope">
            <el-switch
                @change="changeEnable(scope.row)"
                v-model="scope.row.enable"
                :disabled="scope.row.id == 1"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#AAAAAA">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="socpe">
            <el-button
                :disabled="socpe.row.id == 1"
                size="mini"
                @click="userUpdate(socpe.row)"
                type="success" >修改
            </el-button>
            <el-popconfirm
                title="您确定删除此用户吗?"
                @confirm="userDelete(socpe.$index, socpe.row)"
            >
              <el-button
                  :disabled="socpe.row.id == 1"
                  slot="reference" size="mini"
                         type="danger">删除
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!--用户列表结束-->
      <!--分页处理-->
      <div style="text-align: left" v-if="show===1">
        <el-row>
          <el-col :span="12">
            <el-pagination
                style="margin: 15px 0px"
                background
                layout="prev, pager, next, jumper, total, sizes"
                :page-size="size"
                :current-page="now"
                :total="total"
                :page-sizes="[2, 4, 6, 8]"
                @current-change="findPage"
                @size-change="findSize">
            </el-pagination>
          </el-col>
        </el-row>
      </div>
      <!--分页处理结束-->
  </div>
</template>

<script>

export default {
  data() {
    return {

      /*用户数组*/
      userArr: [],
      /*用户名查询*/
      usernameSearch: "",
      phoneNum:'',
      /*表分页*/
      total: '',
      now: 1,
      size: 4,
      input2: "",
      /*表分页结束*/
      date: { dateTime: '',page:'',pageSize:''},
      show:1,

    };
  },
  methods: {
    dateSearch(currentPage, pageSize){
      currentPage = currentPage ? currentPage : this.now;
      pageSize = pageSize ? pageSize : this.size;
      this.date.page=currentPage;
      this.date.pageSize = pageSize;
      if (this.date.dateTime === '') {
        this.$message.error("选择的时间不能为空");
        return;
      }
      let url = 'http://localhost:8080/users/search-date';
      let formData = this.qs.stringify(this.date);
      console.log("formData"+formData)
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url,formData).then((response)=> {
        this.userArr = response.data.data.list;
        this.total=response.data.data.totalPage;
        this.date.dateTime = '';
      })
    },
    phoneSearch(currentPage, pageSize){
      currentPage = currentPage ? currentPage : this.now;
      pageSize = pageSize ? pageSize : this.size;
      this.date.page=currentPage;
      this.date.pageSize = pageSize;
      if (this.phoneNum == '') {
        this.$message.error("手机号不能为空");
        return;
      }
      let url = 'http://localhost:8080/users/search-phone?phoneNum=' + this.phoneNum+"&page="
          + currentPage + "&pageSize=" + pageSize;
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=> {
        this.userArr = response.data.data.list;
        this.total=response.data.data.totalPage;
        this.phoneNum = '';
      })
    },
    changeEnable(user) {
      let enableText = ['禁用', '启用'];
      let url = 'http://localhost:8080/users/' + user.id;
      if (user.enable == 1) {
        url += '/enable';
      } else {
        url += '/disable';
      }

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          let message = '将管理员【' + user.username + '】的启用状态改为【' + enableText[user.enable] + '】成功！';
          this.$message({
            message: message,
            type: 'success'
          });
        } else {
          this.$message.error(responseBody.message);
        }
        if (responseBody.state == 40400) {
          this.showAllUserInfo();
        }
      });
    },
    /*表分页方法*/
    findPage(now_page) {
      //用来处理当前页的方法,page为当前页
      this.now = now_page;
      this.showAllUserInfo(now_page, this.size);
    },
    findSize(now_size) {
      //用来处理每页条数的方法,size为当前页条数
      this.size = now_size;
      this.showAllUserInfo(this.now, now_size);
    },
    // 分页展示所有的用户信息
    showAllUserInfo(currentPage, pageSize) {
      currentPage = currentPage ? currentPage : this.now;
      pageSize = pageSize ? pageSize : this.size;
      let url = "http://localhost:8080/users/select?page=" + currentPage + "&size=" + pageSize;
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=>{
        this.userArr = response.data.data;
      })
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get("http://localhost:8080/users/selectCount").then((response)=>{
        this.total = response.data;
      })
    },
    allUser() {
      let url = "http://localhost:8080/users/rebuild-cache"
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((res)=>{})
      location.href="/sys-admin/temp/user/list"

    },
    /*用户查找*/
    userSearch(currentPage, pageSize) {
      currentPage = currentPage ? currentPage : this.now;
      pageSize = pageSize ? pageSize : this.size;
      if (this.usernameSearch == '') {
        this.$message.error("用户名不能为空");
        return;
      }
      let url = 'http://localhost:8080/users/search?username=' + this.usernameSearch +
          '&page=' + 1 + '&size=' + pageSize;
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=> {
        this.userArr = response.data.data;
        this.usernameSearch = "";
        this.total = this.userArr.length;
      })
    },
    /*用户删除*/
    userDelete(key, user) {
      let url = 'http://localhost:8080/users/'+user.id+'/deleteById'
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response)=>{
        if (response.data.state==20000){
          this.$message.success("删除成功");
          location.reload();
        }else {
          this.$message.error(response.data.message);
          this.showAllUserInfo();
        }
      })
    },
    /*用户管理之修改用户信息*/
    userUpdate(user) {
      this.$router.push('/sys-admin/temp/user/list/update?id='+ user.id);
    },
    /*用户添加*/
    userInsert() {
      this.$router.push('/sys-admin/temp/user/list/add-new');
    },
    },
  mounted() {
    /*分页查找用户信息*/
    this.showAllUserInfo();
  }
}
</script>